Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP06。

在前一回 EP 05 提到要繼續處理所設計的 SplitView 當中按鈕點選與切換的相關進展。

打開 ViewModels/MainWindowViewModel.cs 後，應該會看到如下畫面與紅框當中的程式碼：

而由於已經繼承 ViewModelBase (該 ViewModelBase 又已經繼承 ObservableObject)，所以可以直接的使用 MVVM ToolKit 套件所帶來的 MVVM 框架的使用方式完成。

首先，先加入以下 C# 程式碼在原本既有的 C# 程式碼下方(如下圖紅框)：

接著再次打開 Views/MainWindow.axaml 進行其 XAML 的編輯設定對應的 Binding：

{Binding IsOpenPane}

{Binding MenuButtonCommand}

如下圖紅框：

再次透過 "偵錯執行(F5)" 跑跑看吧！

此時會看到一開始畫面會是如此：

滑鼠點選上方的 "-" Button：

ListBox 選單顯示：

當然，再點擊一次 "-" Button，就會再回到一開始的畫面：

其中的觀念就不多做解釋了~~(懂的人都懂)~~，繼續來完成後續的切換處理。

接著在 ViewModels 當中增加兩個命名為 OOOOPageViewModel 類別，OOOO 的字各別為 Chat、Setting：

並讓建立好的這兩個類別有如下圖紅框的程式碼：

namespace TopAOAIConnector.ViewModels;

internal partial class ChatPageViewModel : ViewModelBase
{
}

namespace TopAOAIConnector.ViewModels;

internal partial class SettingPageViewModel : ViewModelBase
{
}

接著再次回到 ViewModels/MainWindowViewModel.cs 進行其 C# 的程式撰寫，在 MainWindowViewModel 類別下方再加入一個 ListItemTemplate 類別並做下圖紅框中的設計：

public class ListItemTemplate(Type modelType)
{
    public string Name { get; } = modelType.Name.Replace("PageViewModel", "");
    public Type ModelType { get; } = modelType;
}

完成後，進到 MainWindowViewModel 類別當中撰寫下圖紅框的程式碼：

[ObservableProperty]
private ViewModelBase? _currentViewModel = new ChatPageViewModel();

[ObservableProperty]
private ListItemTemplate? _selectedListItem;

public ObservableCollection<ListItemTemplate> Items { get; } =
[
    new ListItemTemplate(typeof(ChatPageViewModel)),
    new ListItemTemplate(typeof(SettingPageViewModel))
];

再繼續加入下列如下圖紅框的程式碼：

partial void OnSelectedListItemChanged(ListItemTemplate? value)
{
    if (value is null)
        return;

    var instance = Activator.CreateInstance(value.ModelType);
    if (instance is not null && instance is ViewModelBase currentPageViewModel)
        CurrentPage = currentPageViewModel;
}

又要再次打開 Views/MainWindow.axaml 進行其 XAML 的編輯，找到 ListBox 的標記，並將原本的 ListBoxItem 置換為如下圖紅框的標記：

<ListBox.ItemTemplate>
    <DataTemplate DataType="{x:Type vm:ListItemTemplate}">
        <StackPanel Orientation="Horizontal" Spacing="14">
            <TextBlock Text="{Binding Name}" />
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

並且在 ListBox 的標記當中增加如下圖紅框屬性設定：

ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedListItem}"

找到下面的 SplitView.Content 標記 ListBox 的標記，並將原本的 TextBlock 標記置換為如下圖紅框的標記：

<Border CornerRadius="10" Background="#2d2d2d">
    <TransitioningContentControl Content="{Binding CurrentPage}" />
</Border>

接下來就可以再次透過 "偵錯執行(F5)" 跑跑看吧！

預設為 ChatPageViewModel 暫時偽裝成 Page 的這個 Chat 頁面，會看到顯示 "TopAOAIConnector.ViewModels.ChatPageViewModel" 文字。透過點選 "-" Button 展開 Pane：

在 Pane 中點選 Setting：

會看到顯示 "TopAOAIConnector.ViewModels.SettingPageViewModel" 文字：

好囉！

那真正的 Page 處理就留待下回再進行吧~~~